<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>管理员账号管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-table thead span {
            /*background-color: #acd3ed;*/
            font-size: 15px;
        }

        .layui-table tbody tr td div {
            font-size: 14px;
        }

        .layui-table tbody tr:hover {
            background-color: #bff7f7;
        }

        .layui-table tbody tr:hover td div {
            font-size: 18px;
        }
    </style>
</head>

<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>
                    管理员管理
                </a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right"
       id="refresh" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="border-radius: 20px;">
                <div class="layui-card-body"
                     style="background-image: linear-gradient(#bff7f7,#ffffff , #bff7f7);border-radius: 20px;">
                    <form class="layui-form layui-col-space5" style="margin-top: 5px" id="myForm">
                        <div class="layui-input-inline">
                            <select lay-verify="choose" lay-filter="choose" name="option">
                                <option value="">选择要查找的内容</option>
                                <option value="账号">账号</option>
                                <option value="手机号">手机号</option>
                                <option value="邮箱">邮箱</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input style="display: none" id="findText" lay-verify="message" type="text" name="message"
                                   placeholder="输入信息" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit lay-filter="search">
                                <i class="layui-icon">&#xe615;</i>查找
                            </button>
                        </div>
                    </form>
                    <table id="demo" lay-filter="demo"></table>
                </div>


            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-edit  "
       lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" value="{{d.account}}" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="getCheckData"
                style="background-color: #bd2b28"><i class="layui-icon "></i>批量删除
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="addAdmin">
            <i class="layui-icon"></i>添加管理员
        </button>

    </div>
</script>
<script type="text/html" id="titleTpl">
    <i>******</i>
</script>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="lock" value="{{d.account}}" lay-skin="switch" lay-text="已停用|未停用" lay-filter="switchBan"
           {{
           d.status== 0 ? '' : 'checked' }}>
</script>
<script>

    layui.use(['table', 'form', 'jquery', 'layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        // var notice = layui.notice;

        //动态显示
        parent.layui.notice.remove();
        parent.layui.notice.info('管理员管理界面', '已进入', parent.noticeOpt1);
        // parent.layui.notice.info('xxx界面', '已进入', parent.noticeOpt1);

        $('.flag').show();

        $("#refresh").click(function () {
            // document.getElementById("myform").reset();
            $("#myForm")[0].reset();
            layui.form.render();
            $("#findText").hide();
            parent.layui.notice.remove();
            parent.layui.notice.success("管理员数据列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6);
            table.render({
                elem: '#demo'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , url: '/index/Administrator/adminMsg' //数据接口
                , loading: true
                , size: 'lg'
                , page: {
                    layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
                    // , limit: 7	//初始  每页几条数据
                    // , limits: [7, 12, 2]	//可以选择的 每页几条数据
                    // , groups: 3 	//最多几个跳页按钮
                }
                , cols: [[ //表头
                    {type: 'checkbox', width: 80}
                    , {field: 'id', title: 'ID', width: 80, align: 'center', sort: true, hide:true}
                    , {field: 'account', title: '账号', minWidth: 120, align: 'center'}
                    , {field: 'password', title: '密码', width: 80, align: 'center', templet: '#titleTpl', hide:true}
                    , {field: 'tel', title: '手机号', width: 150, align: 'center'}
                    , {field: 'email', title: '邮箱', minWidth: 250, align: 'left'}
                    , {
                        field: 'status',
                        title: '状态',
                        width: 124,
                        align: 'center',
                        templet: '#checkboxTpl',
                        unresize: true
                    }
                    , {field: 'operation', title: '操作', width: 160, align: 'center',  toolbar: '#barDemo'}

                ]]

            });
        });

        //生成数据表格
        var tableIns = table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , url: '/index/Administrator/adminMsg' //数据接口
            , loading: true
            , size: 'lg'
            , page: {
                layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
                // , limit: 7	//初始  每页几条数据
                // , limits: [7, 12, 2]	//可以选择的 每页几条数据
                // , groups: 3 	//最多几个跳页按钮
            }
            , cols: [[ //表头
                {type: 'checkbox', width: 80}
                , {field: 'id', title: 'ID', width: 80, align: 'center', sort: true, hide:true}
                , {field: 'account', title: '账号', minWidth: 120, align: 'center'}
                , {field: 'password', title: '密码', width: 80, align: 'center', templet: '#titleTpl', hide:true}
                , {field: 'tel', title: '手机号', width: 150, align: 'center'}
                , {field: 'email', title: '邮箱', minWidth: 250, align: 'left'}
                , {field: 'status', title: '状态', width: 124, align: 'center', templet: '#checkboxTpl', unresize: true}
                , {field: 'operation', title: '操作', width: 160, align: 'center',  toolbar: '#barDemo'}

            ]]

        });

        // 动态显示搜索选项提示
        form.on('select(choose)', function (data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            var findText = $("#findText");
            var select = data.value;
            findText.val('');
            // console.log(findText.val);
            switch (select) {
                case "账号":
                    findText.attr('placeholder', "请输入要搜索的账号");
                    // findText.attr('lay-reqText', '请输入要搜索的账号');
                    findText.show();

                    break;
                case "手机号":
                    findText.show();
                    findText.attr('placeholder', '请输入要搜索的手机号');
                    // findText.attr('lay-reqText', '请输入要搜索的手机号');
                    break;
                case "邮箱":
                    findText.show();
                    findText.attr('placeholder', '请输入要搜索的邮箱');
                    // findText.attr('lay-reqText', '请输入要搜索的邮箱');
                    break;
                default:
                    findText.hide();
                    break;
            }

        });

// 自定义验证规则
        form.verify({
            choose: function (value) {
                if (!value){
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请选择搜索项', '操作异常', parent.noticeOpt5);
                    return '请选择搜索项！'
                }

            },
            message: function (value) {
                if (!value){
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请输入要搜索的内容', '操作异常', parent.noticeOpt5);
                    return '请输入要搜索的内容';
                }

            }
        });

        //搜索功能
        form.on('submit(search)',
            function (data) {
                layer.msg('搜索中', {time: 1000});
                var load = layer.load();
                tableIns.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        choose: data.field.option
                        , message: data.field.message
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , done: function (res, curr, count) {
                        layer.close(load);
                        parent.layui.notice.remove();
                        if (count === 0) {
                            parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4);
                            layer.msg('搜索完成，' + res.msg, {time: 1500});
                        } else {
                            parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4);
                            layer.msg('搜索完成，找到' + count + '条数据', {time: 1500});
                        }
                    }
                });
                return false;
            });

        // 停用、恢复 管理员
        form.on('switch(switchBan)', function (data) {
            var status = this.checked ? 'true' : 'false';
            parent.layui.notice.remove();
            $.ajax({
                type: "POST",
                url: "/index/Administrator/banAdmin",
                data: {
                    account: data.value,
                    type: status
                },
                success: function (msg) {
                    parent.layui.notice.success('管理员：' + data.value + (status == 'true' ? ' 已停用' : ' 已恢复'), '操作成功', parent.noticeOpt4);
                    if (msg === 'ok') {
                        layer.tips('' + (status === 'true' ? '已停用' : '已恢复'), data.othis, {time: 600});
                        form.render('checkbox'); //刷新checkbox开关渲染
                    } else {
                        parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                        layer.alert(msg, {icon: 2});
                    }
                },
                error: function () {
                    parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                    layer.alert('数据传输失败，请联系后台管理员！', {icon: 5})
                }
            });

            // console.log(data.value);
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            //修改管理员
            if (obj.event === 'edit') {
                // layer.msg('ID：'+ data.id + ' 的查看操作');
                parent.layui.notice.remove();
                parent.layui.notice.warning('正在修改管理员：' + data.account + ' 的信息', '操作提示：', parent.noticeOpt3);
                // parent.layui.notice.warning('正在执行xxx', '操作提示：', parent.noticeOpt3);
                xadmin.open('修改管理员', '/index/tools/admin_edit?id=' + data.id, 400, 500, window.screen.width);
            }
            //单个删除管理员
            else if (obj.event === 'del') {
                parent.layui.notice.remove();
                parent.layui.notice.warning('正在删除管理员：' + data.account, '操作提示：', parent.noticeOpt3);
                layer.confirm('真的要删除管理员：' + data.account + ' 吗？', {
                        closeBtn: 0,
                        title: '提示',
                        shade: [0.7, '#dc7069']
                    }, function (index) {
                        // obj.del();
                        layer.msg('删除中……');
                        var load = layer.load();
                        $.ajax({
                            type: "POST",
                            url: "/index/Administrator/delAdmin",
                            data: {
                                account: data.account,
                            },
                            success: function (msg) {
                                layer.close(load);
                                parent.layui.notice.remove();
                                if (msg == 'ok') {
                                    parent.layui.notice.success('删除管理员' + data.account + '成功', '操作完成', parent.noticeOpt4);
                                    layer.msg('删除管理员' + data.account + '成功', {time: 1000, icon: 1});
                                    setTimeout(function () {
                                        // location.reload();
                                        $("#refresh").click();
                                    }, 800);

                                } else {
                                    parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                    layer.msg(msg, {time: 1200});
                                }

                            },
                            error: function () {
                                layer.close(load);
                                parent.layui.notice.remove();
                                parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                layer.msg('数据传输失败，请联系后台管理员', {time: 800, icon: 2});
                            }
                        });
                        layer.close(index);
                    },
                    function () {
                        layer.msg('您取消了操作', {time: 600});
                    }
                );
            }
        });

        //头工具栏事件
        table.on('toolbar(demo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            // 添加管理员
            if (obj.event === 'addAdmin') {
                parent.layui.notice.remove();
                parent.layui.notice.warning('正在添加管理员', '操作提示', parent.noticeOpt3);
                xadmin.open('添加管理员', '/index/tools/admin_add', 400, 500, window.screen.width);
            }
            //批量删除管理员
            if (obj.event === 'getCheckData') {
                var data = checkStatus.data;
                // console.log(data);
                // console.log(data[0]['id']);
                // console.log(data[0]['account']);

                //判断是否为空
                parent.layui.notice.remove();
                if (!data[0]) {
                    // parent.layui.notice.options = parent.noticeOpt5;
                    parent.layui.notice.error('请选择要删除的管理员！', '操作异常', parent.noticeOpt5);
                    return layer.msg('请选择要删除的管理员！', {icon: 2, time: 800});
                }
                var arrId = new Array();
                var arrAcc = '';
                for (var i = 0, len = data.length; i < len; i++) {
                    arrId.push(data[i]['account']);
                    arrAcc += (data[i]['account']) + ' ';
                }
                // console.log(arrAcc);
                parent.layui.notice.warning('正在删除管理员: ' + arrAcc, '操作提示', parent.noticeOpt3);
                layer.confirm('确定要删除管理员: ' + arrAcc + '吗？', {
                        closeBtn: 0,
                        title: '提示',
                        shade: [0.7, '#dc7069'],
                    }, function (index) {
                        // obj.del();
                        layer.msg('删除中……');
                        var load = layer.load();
                        $.ajax({
                            type: "POST",
                            url: "/index/Administrator/delAllAdmin",
                            data: {
                                account: arrId,
                                log: arrAcc
                            },
                            success: function (msg) {
                                layer.close(load);
                                parent.layui.notice.remove();
                                if (msg == 'ok') {
                                    parent.layui.notice.success('删除管理员' + arrAcc + '成功', '操作完成', parent.noticeOpt4);
                                    layer.msg('删除管理员' + arrAcc + '成功', {time: 1400, icon: 1});
                                    setTimeout(function () {
                                        $("#refresh").click();
                                    }, 1000);

                                } else {
                                    parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                    layer.msg(msg, {time: 1000});
                                }

                            },
                            error: function () {
                                layer.close(load);
                                parent.layui.notice.remove();
                                parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                layer.msg('数据传输失败，请联系后台管理员', {time: 800, icon: 1});
                            }
                        });
                        layer.close(index);
                    },
                    function () {
                        layer.msg('您取消了操作', {time: 600});
                        // location.reload();
                    });


            }
        });


    });


</script>

</html>